<template>
  <div class="admin" ref="admin">
    <div class="eye" ref="eye"></div>
    <el-row class="header">
      <a class="navbar-brand mr-2" href="/">
        <img src="@/assets/img/logo.png" height="40px" alt="" />
      </a>
      <span>后台管理系统</span>
    </el-row>
    <el-row class="tac">
      <el-col :span="3">
        <el-menu
          @select="handleOpen"
          default-active="3"
          class="el-menu-vertical-demo"
          background-color="#28363d"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item index="1">
            <template slot="title">
              <i class="el-icon-s-flag"></i>
              <span>活动审核</span>
            </template>
          </el-menu-item>
          <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title">动态审核</span>
          </el-menu-item>
          <el-menu-item index="3">
            <i class="el-icon-s-custom"></i>
            <span slot="title">用户管理</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">设置</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="21">
        <activity-admin class="admin_dh" v-if="index === '1'"></activity-admin>
        <mood-admin class="admin_dh" v-if="index === '2'"></mood-admin>
        <user-admin class="admin_dh" v-if="index === '3'"></user-admin>
        <setting
          v-if="index === '4'"
          @eyeChange="eyeChange"
          @fullScreen="fullScreen"
        ></setting>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import activityAdmin from "@/components/admin/activityAdmin.vue";
import MoodAdmin from "@/components/admin/moodAdmin.vue";
import UserAdmin from "@/components/admin/userAdmin.vue";
import Setting from "@/components/admin/setting.vue";

export default {
  components: {
    activityAdmin,
    MoodAdmin,
    UserAdmin,
    Setting,
  },
  data() {
    return {
      index: "3",
      //
      reverse: true,
      activities: [
        {
          content: "实习实践",
          timestamp: "2022-01-01",
        },
        {
          content: "毕设9周",
          timestamp: "2022-01-21",
        },
        {
          content: "毕设9周",
          timestamp: "2022-01-21",
        },
        {
          content: "小组答辩",
          timestamp: "2022-05-14",
        },
        {
          content: "系级答辩",
          timestamp: "2022-05-28",
        },
        {
          content: "院级答辩",
          timestamp: "2022-06-04",
        },
        {
          content: "院学位会&&系学位会",
          timestamp: "2022-06-11--2020-06-18",
        },
        {
          content: "毕业离校",
          timestamp: "2022-06-26",
        },
      ],
    };
  },
  methods: {
    eyeChange(val) {
      if (val === false) {
        this.$refs.eye.style.display = "none";
      } else {
        this.$refs.eye.style.display = "block";
      }
    },
    fullScreen(value) {
      if (value === true) {
        if (this.$refs.admin.requestFullScreen) {
          this.$refs.admin.requestFullScreen();
        } else if (this.$refs.admin.webkitRequestFullScreen) {
          this.$refs.admin.webkitRequestFullScreen();
        } else if (this.$refs.admin.mozRequestFullScreen) {
          this.$refs.admin.mozRequestFullScreen();
        }
        return;
      }
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
    },
    handleOpen(key) {
      this.index = key;
    },
  },
};
</script>
<style scoped lang="scss">
.admin {
  background: white;
  position: relative;
  .eye {
    position: absolute;
    height:100vh;
    width: 100vw;
    z-index: 2022;
    background: rgb(165, 165, 162);
    opacity: 0.2;
    pointer-events: none;
    display: none;
  }
  .header {
    height: 5vh;
    background: #1d2f38;
    span {
      color: white;
      font-size: 1.5rem;
      vertical-align: bottom;
    }
  }
  .el-menu-vertical-demo {
    height: 95vh;
  }
}
</style>
